<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>ECharts 入门示例--饼状图</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
   <div id="main" style="width: 600px;height:400px;">

   </div>

   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

   option = {
     backgroundColor: '#2c343c',
     //将数值的大小映射到明暗度。
     visualMap: {
       // 不显示 visualMap 组件，只用于明暗度的映射
       show: false,
       // 映射的最小值为 80
       min: 80,
       // 映射的最大值为 600
       max: 600,
       inRange: {
           // 明暗度的范围是 0 到 1
           colorLightness: [0, 1]
       }
   },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            //圆的大小 相对dom的大小而言
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            //南丁格尔图
            roseType:'angle',
            //文本颜色
            label:{
              normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.8)'
                    }
                  }
            },
            //线条颜色
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(0, 255, 255, 0.2)'
                    }
                }
            },
            //扇形颜色
              itemStyle:{
                //设置扇形的颜色
                color:'#c23534',
                //项目的样式
                shadowBlur:200,
                //阴影的大小
                shadowOffsetX:0,
                //阴影水平方向上的偏移
                shadowOffsetY:0,
                //阴影垂直方向的偏移
                shadowColor:'rgba(0,0,0,0.5)',
                //阴影颜色
                emphasis: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.9)'
                },
                //itemStyle的emphasis是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。
              }
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
  </body>
</html>
